<template>
	<view class="content">
		<view class="header">纯前端附件选择上传2.0</view>
		
		<button style="margin: 30rpx;" @click="openDemo('/pages/test1/test1')">基本使用示例</button>
		<button style="margin: 30rpx;" @click="openDemo('/pages/test2/test2')">Scroll内使用示例</button>
		<button style="margin: 30rpx;" @click="openDemo('/pages/test3/test3')">Popup弹框内使用示例</button>
		<button style="margin: 30rpx;" @click="openDemo('/pages/nvue-demo/nvue-demo')">Nvue内使用示例</button>
		
		<view class="tab">
			<view :style="[{color: tabIndex==0? '#3F536E': '#999'}]" @click="onTab(0)">Tab切换演示</view>
			<view :style="[{color: tabIndex==1? '#3F536E': '#999'}]" @click="onTab(1)">scroll内使用</view>
		</view>
		
		<view>
			<view style="font-weight: bold;margin: 30rpx;">
				以下是内容包含setData动态设置值、setFiles动态设置列表、Tab切换、手动上传、删除等一些方法演示
				<view>提示：debug传true时会看见选择框，调试完成后请传false</view>
			</view>
			<view v-for="(item,index) in list" :key="index" class="padding">{{ item }}</view>
			<button style="margin: 30rpx;" @click="showUpload">show-当前页所有上传组件透明层</button>
			<button style="margin: 30rpx;" @click="hide">hide-当前页所有上传组件透明层</button>
		</view>
		
		<view class="padding">
			
			<view>已选择文件列表：</view>
			<view style="font-weight: bold;padding: 30rpx 60rpx;">
			提示：App端只能使用组件内置方法上传文件，返回的path字段仅供用于图片视频类标签src属性(如下示例↓)，他用自行处理!!
			</view>
			
			<!-- #ifndef MP-WEIXIN -->
			<view v-for="(item,index) in files.values()" :key="index">
				<image style="width: 100rpx;height: 100rpx;" :src="item.path" mode="widthFix"></image>
				<text>{{ item.name }}</text>
				<text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
				<text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
				<text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
				<text v-if="item.responseText" style="margin-left: 10rpx;">服务端返回演示：{{ item.responseText }}</text>
				<text v-if="item.type!='success'" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;" @click="resetUpload(item.name)">手动上传</text>
				<text style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;" @click="clear(item.name)">删除</text>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
			<view v-for="(item,index) in wxFiles" :key="index">
				<text>{{ item.name }}</text>
				<text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
				<text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
				<text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
				<view>
					<button @click="resetUpload(item.name)">重新上传</button>
					<button @click="clear(item.name)">删除</button>
				</view>
			</view>
			<!-- #endif -->
			
		</view>
		
		<view v-show="tabIndex===0" class="padding">
			<lsj-upload 
			ref="lsjUpload0"
			childId="upload1"
			:width="width"
			:height="height"
			:option="option"
			:toBase="toBase"
			:size="size"
			:count="count"
			:formats="formats"
			:debug="debug"
			:instantly="instantly"
			:distinct="distinct"
			@changeFile="onChange"
			@progress="onprogress"
			@uploadEnd="onuploadEnd"
			@permissionBefore="permissionBefore"
			@permissionFail="onpermissionFail"
			>
				<view class="btn" :style="{width: width,height: height}">选择附件</view>
			</lsj-upload>
			
			<view style="margin-top: 20rpx;">
				<view class="btn" style="width: 100px;height: 100rpx;" @click="upload">手动上传</view>
			</view>
			
		</view>
		<view v-show="tabIndex===1">
			APP端因为webview层级比当前窗口文档流级别高，
			切换tab时应该把webview透明层hide掉，切换回去再重新show
			<scroll-view class="scroll" scrollY style="height: 800rpx;" @scroll="onscroll">
				<view v-for="(val,k) in 30" :key="k">{{ val }}</view>
				<lsj-upload
				ref="lsjUpload1"
				childId="upload1"
				:width="width"
				:height="height"
				:option="option"
				:size="size"
				:multiple="multiple"
				:formats="formats"
				:debug="debug"
				:instantly="instantly"
				@changeFile="onChange"
				@progress="onprogress"
				@uploadEnd="onuploadEnd"
				>
					<view class="btn" :style="{width: width,height: height}">选择附件</view>
				</lsj-upload>
				<view v-for="(val2,j) in 30" :key="'j_'+j">{{ val2 }}</view>
			</scroll-view>
			
			
		</view>
		
		
		<view class="padding ts">
			<view>此次改版l-file，slot自定义样式，取消中间层</view>
			<view>不脱离文档流，跟随页面级滚动</view>
			<view>使用插件有疑问欢迎加入</view>
			<view>QQ交流群：看插件文档</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 调试时传true打印日志并且显示file按钮
			debug: false,
			// 上传接口参数
			option: {
				// 上传服务器地址，需要替换为你的接口地址
				url: 'http://hl.jw.com/dropbox/document/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
				// 上传附件的key
				name: 'file',
				// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
				header: {
					'Content-Type': 'application/json',
					// 示例参数可删除
					'Authorization': 'bearer aa',
					'uid': '27',
					'accountid': '27'
				},
				// 根据你接口需求自定义body参数
				formData: { 
					'orderId': 1000
				}
			},
			/**
			 * 文件是否转base64
			 * false: file为文件流上传
			 * true: file转base64上传
			 */
			toBase: true,
			// 重名文件是否去重，false时同名文件显示 文件名称(N).后缀
			distinct: false,
			// 选择文件后是否立即自动上传，true=选择后立即上传
			instantly: true,
			// 必传宽高且宽高应与slot宽高保持一致
			width: '180rpx',
			height: '180rpx',
			// 限制允许上传的格式，空串=不限制，默认为空
			formats: 'png,jpg,jpeg',
			// 文件上传大小限制
			size: 30,
			// 文件数量限制
			count: 5,
			// 是否多选
			multiple: true,
			// 文件回显列表
			files: new Map(),
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			wxFiles: [],
			// 演示用
			tabIndex: 0,
			list:[], 
		}
	},
	onReady() {
		setTimeout(()=>{
			console.log('----演示动态更新参数-----');
			this.$refs['lsjUpload'+this.tabIndex].setData('formData.orderId','动态设置的参数'); 
			
			console.log('以下注释内容为-动态更新参数更多演示，放开后可查看演示效果');
			// 修改option对象的name属性
			// this.$refs.lsjUpload.setData('name','myFile');
			
			// 修改option对象的formData内的属性
			// this.$refs.lsjUpload.setData('formData.appid','1111');
			
			// 替换option对象的formData
			// this.$refs.lsjUpload.setData('formData',{appid:'222'});
			
			// option对象的formData新增属性
			// this.$refs.lsjUpload.setData('formData.newkey','新插入到formData的属性');
			
			
			// ---------演示初始化值，用于已提交后再次编辑时需带入已上传文件-------
			// 方式1=传入数组
			// let files1 = [{name: '1.png'},{name: '2.png',}];
			
			// 方式2=传入Map对象
			// let files2 = new Map();
			// files2.set('1.png',{name: '1.png'})
			
			// 此处调用setFiles设置初始files
			// this.$refs.lsjUpload.setFiles(files1);
			
			// 初始化tab
			this.onTab(0);
			
		},2000)
	},
	methods: {
		getRequest(url) {
			let theRequest = new Object()
			let index = url.indexOf('?')
			if (index != -1) {
				let str = url.substring(index + 1)
				let strs = str.split('&')
				for (let i = 0; i < strs.length; i++) {
					theRequest[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1])
				}
			}
			return theRequest
		},
		openDemo(url) {
			uni.navigateTo({
				url
			})
		},
		// APP端 isPermissionInToast=false时，点击按钮检测到某项权限未授权时触发
		// 注意：不建议isPermissionInToast传false!!
		// 因为isPermissionInToast等于false时弹出的授权窗口用户点击同意后不会继续打开系统文件选择界面，需要用户再点一次选择文件按钮
		permissionBefore({permission,message},childId) {
			console.log(childId,'permission', permission,message);
		},
		// APP端 用户有权限点击不同意时触发
		// 当isPermissionBuiltInHandle=false不使用组件内置弹框引导用户开启时，可在此函数内自定义弹框
		onpermissionFail({permission,message,result},childId) {
			console.log(childId,'permission', permission, message, result);
		},
		// 某文件上传结束回调(成功失败都回调)
		onuploadEnd(item,childId) {
			console.log(`${item.name}已上传结束，上传状态=${item.type}`);
			
			// 更新当前窗口状态变化的文件
			this.files.set(item.name,item);
			
			// ---可删除--演示上传完成后取服务端数据
			if (item['responseText']) {
				console.log('演示服务器返回的字符串JSON转Object对象');
				this.files.get(item.name).responseText = JSON.parse(item.responseText);
			}
			
			// 微信小程序Map对象for循环不显示，所以转成普通数组，
			// 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif
			
			// 强制更新视图
			this.$forceUpdate();
			
			
			// ---可删除--演示判断是否所有文件均已上传成功
			let isAll = [...this.files.values()].find(item=>item.type!=='success');
			if (!isAll) {
				console.log('已全部上传完毕');
			}
			else {
				console.log(isAll.name+'待上传');
			}
			
		},
		// 上传进度回调
		onprogress(item,childId) {
			// 更新当前状态变化的文件
			this.files.set(item.name,item);
			
			// console.log('打印对象',JSON.stringify(this.files.get(item.name)));
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif
			
			// 强制更新视图
			this.$forceUpdate();
			
		},
		// 文件选择回调
		onChange(files,childId) {
			console.log('----',JSON.stringify([...files]));
			console.log('组件childId',childId);
			// console.log('当前选择的文件列表：',JSON.stringify([...files.values()]));
			// 更新选择的文件 
			this.files = files;
			// 强制更新视图
			this.$forceUpdate();
			
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()]; 
			// #endif
			
			// ---可删除--演示重新定位覆盖层控件
			this.$nextTick(()=>{
				console.log('演示重新定位 (提示：像示例里文件列表在按钮上方时就需要插入文件后更新webview位置)');
				// 直接更新当前页面所有上传组件webview位置
				uni.$emit('$upload-show',{});
				
				// 也可以通过以下方式指定更新ref对应组件位置
				// this.$refs.lsjUpload0.show();
				// this.$refs.lsjUpload1.show();
				// this.$refs.lsjUpload2.show();
			});
			
		},
		// 手动上传
		upload() {
			// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
			this.$refs['lsjUpload'+this.tabIndex].upload();
		},
		// 指定上传某个文件
		resetUpload(name) {
			this.$refs['lsjUpload'+this.tabIndex].upload(name);
		},
		// 移除某个文件
		clear(name) {
			// name=指定文件名，不传name默认移除所有文件
			this.$refs['lsjUpload'+this.tabIndex].clear(name);
		},
		// ---可删除--演示在scroll中，scroll滚动后重新定位webview
		onscroll() {
			// #ifdef APP
			if (this.scrollTime) {
				clearTimeout(this.scrollTime);
			}
			this.scrollTime = setTimeout(()=> {
				console.log('scroll结束调用show()');
				this.$refs.lsjUpload1.show();
			},300)
			// #endif
		},
		/**
		 * ---可删除--演示Tab切换时覆盖层是否能被点击
		 * APP端因为是webview，层级比view高，此时若不希望点击触发选择文件，需要手动调用hide()
		 * 手动调用hide后，需要调用show()才能恢复覆盖层的点击
		 */
		onTab(tabIndex) {
			// 隐藏所有的控件（透明层）
			uni.$emit('$upload-hide',{});
			
			this.tabIndex = tabIndex;
			// 显示允许点击的控件（透明层）
			this.$nextTick(()=>{
				this.$refs['lsjUpload'+this.tabIndex].show();
			})
			
		},
		/**
		 * 可删除，隐藏页面所有按钮点击层
		 */
		hide() {
			uni.$emit('$upload-hide',{});
		},
		/**
		 * 可删除，显示页面所有按钮点击层
		 */
		showUpload() {
			uni.$emit('$upload-show',{});
		}
	}
}
</script>

<style>
	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		line-height: 130rpx;
		text-align: center;
		font-size: 32rpx;
		background-color: #3F536E;
		color: #fff;
		z-index: 9999;
	}
	.content {
		padding-top: 130rpx;
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.inputs {
		height: 100rpx;
		border-bottom: 1rpx solid #808080;
	}
	.padding {
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-bottom: 50rpx;
	}
	.tab {display: flex;padding: 30rpx;}
	.tab view {height: 100rpx;line-height: 100rpx;flex: 1;text-align: center;border: 1rpx solid #2C405A;}
	.btn {
		height: 80rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
	.ts {
		line-height: 2em;
	}
	.nbtn {
		margin: 100rpx 50rpx;
	}
</style>
